<template>
	<view class="content">
		<view class="top">
			<view class="top-d1">
				<!-- {
					"id":2,
					"venueId":"2f56c0ce-98f0-4a80-bd8e-85dfbec02ee9",
					"memberUserId":null,
					"coachCode":"ffb7-4ee1-9508",
					"coachName":"王旭",
					"coachPhone":"13212341234",
					"coachPassword":"$2a$10$bJd5e4ampYpapCRJ7FslxulVdPrEkbJYb/w.DaAy5V8QdSxFBwZTC",
					"coachImg":"6215,6216,6217,6218,6219",
					"coachTeachingTimes":8,"
					coachInformation":"123",
					"coachSpecialty":"123",
					"coachExperience":"123",
					"createTime":1699429417000,
					"updateTime":1701066616000,
					"delFlag":"0"
				} -->
				<view style="width: 100%;height: 15vh;margin: 0 auto;margin-top: 50rpx;display: flex;justify-content: center; align-items: center;">
					<view style="text-align: center;">
						<image src="http://101.43.223.224:8765/image/getImageById?id=6465" 
						:style="{
						    height: '12.5vh',
						    width: '12.5vh',
						    borderRadius: '10vh',
						    boxShadow: '0 0 17px 4px ' + (form.coachSex === '0' ? 'rgba(255, 192, 203, 1)' : 'rgba(110, 231, 240, 1)'),
						    marginBottom: '7rpx'
						  }"></image>
						<!-- <image :src="'http://101.43.223.224:8765/image/getImageById?id=' + form.coachImg[0]" style="height: 13vh;width: 13vh;border-radius: 13vh;"></image> -->
						<view style="font-size: 40rpx;margin:0 auto;color: rgba(0, 0, 0, 0.58);">{{form.coachName}} </view>
					</view>
				</view>
				
			</view>
			<view class="top-d2">
				<view style="height: 10vh; float: left; display: flex; justify-content: center; align-items: center;margin-left: 11rpx;">
				    <text style="font-size: 30rpx;">邀请二维码</text>
					<view style="width: 7vh; height: 7vh; border-radius: 2px;">
						<image v-if="qrCodeUrl" :src="qrCodeUrl" mode="aspectFit" style="width: 7vh; height: 7vh;" @tap="previewImage()"></image>
					</view>
				</view>
				<view style="width: 58%; height: 10vh; float: left;margin-left: 3rpx;">
				    <view style="width: 100%; height: 10vh;display: flex; align-items: center;letter-spacing: 2rpx;padding-left:10rpx;">
						<text style="font-size: 30rpx;">邀请码：{{form.coachCode}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="body">
			<view class="body-d1">
				<view class="body-d1-d"  @tap="upName()">
					<view class="body-d1-d-d1">
						<text style="text-indent:20rpx;font-size: 33rpx;">教练姓名</text>
					</view>
					<view class="body-d1-d-d2">
						<text style="font-size: 33rpx;">{{form.coachName}} </text>
						<u-icon name="arrow-right" size="33rpx"></u-icon>
					</view>
				</view>
				<view class="body-d1-d"  @tap="upSex()">
					<view class="body-d1-d-d1">
						<text style="text-indent: 20rpx;font-size: 33rpx;">教练性别</text>
					</view>
					<view class="body-d1-d-d2">
						
						<text style="font-size: 33rpx;">{{form.coachSex=='0'?'女':form.coachSex=='1'?'男':'第三性'}} </text>
						<u-icon name="arrow-right" size="33rpx"></u-icon>
					</view>
				</view>
				<view class="body-d1-d">
					<view class="body-d1-d-d1">
						
						<text style="text-indent: 20rpx;font-size: 33rpx;">所属场馆</text>
					</view>
					<view class="body-d1-d-d2">
						<text style="font-size: 33rpx;">{{form.userName}} </text>
					</view>
				</view>
				<view class="body-d1-d">
					<view class="body-d1-d-d1">
						
						<text style="text-indent: 20rpx;font-size: 33rpx;">手机号</text>
					</view>
					<view class="body-d1-d-d2">
						<text style="font-size: 33rpx;">{{form.coachPhone}} </text>
					</view>
				</view>
				<view class="body-d1-d" @tap="shengqing()">
					<view class="body-d1-d-d1">
						<text style="text-indent: 20rpx;font-size: 33rpx;">学员申请</text>
					</view>
					<view class="body-d1-d-d2">
						<u-icon name="arrow-right" size="33rpx"></u-icon>
					</view>
				</view>
				<view class="body-d1-d" @tap="mytime()">
					<view class="body-d1-d-d1">
						<text style="text-indent: 20rpx;font-size: 33rpx;">我的时间</text>
					</view>
					<view class="body-d1-d-d2">
						<u-icon name="arrow-right" size="33rpx"></u-icon>
					</view>
				</view>
				<view class="body-d1-d" @tap="upPassword()">
					<view class="body-d1-d-d1">
						
						<text style="text-indent: 20rpx;font-size: 33rpx;">修改密码</text>
					</view>
					<view class="body-d1-d-d2">
						<u-icon name="arrow-right" size="33rpx"></u-icon>
					</view>
				</view>
				<view class="body-d1-d" @tap="outlogin()">
					<view class="body-d1-d-d1">
						<text style="text-indent: 20rpx;font-size: 33rpx;">退出登录</text>
					</view>
					<view class="body-d1-d-d2">
						<u-icon name="arrow-right" size="33rpx"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<tabbar selected-index=4></tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form:{},
				qrCodeUrl: ''
			}
		},
		onShow() {
			this.selelctInfo()
		},
		methods: {
			outlogin(){
				uni.removeStorageSync('teacherinfo');
				uni.reLaunch({
					url: '/pages/student/login/identity',
					})
			},
			upName(){
				uni.navigateTo({
					url: '/pages/coach/Pesonal/UpName?item='+JSON.stringify(this.form)
				})
			},
			upSex(){
				uni.navigateTo({
					url: '/pages/coach/Pesonal/UpSex?item='+JSON.stringify(this.form)
				})
			},
			upPassword(){
				uni.navigateTo({
					url: '/pages/coach/Pesonal/upPassword?item='+JSON.stringify(this.form)
				})
			},
			mytime(){
				uni.navigateTo({
					url:'/pages/coach/Pesonal/TrainingTime?item='+JSON.stringify(this.form)
				})
			},
			previewImage() {
			    wx.previewImage({
			      urls: [this.qrCodeUrl], // 预览的图片链接数组
			      current: this.qrCodeUrl, // 当前显示的图片链接
			    });
			  },
			selelctInfo(){
				var ths = this;
				uni.request({
					url: 'http://127.0.0.1:17000/AppCoach/getCoachById',
					method: 'GET',
					data: {
						id: uni.getStorageSync('teacherinfo').id
					},
					success: function(res) {
						if (res.data.code == 200) {
							ths.form = res.data.data
							  const content = ths.form.coachCode; // 替换为你要生成二维码的内容
							
							  uni.request({
							    url: 'http://127.0.0.1:17000/Article/generateQRCode',
							    method: 'POST',
							    data: content,
							    responseType: 'arraybuffer',
							    success: (res) => {
							      const base64 = uni.arrayBufferToBase64(res.data);
							      ths.qrCodeUrl = 'data:image/png;base64,' + base64;
							    },
							    fail: (err) => {
							      console.error(err);
							    }
							  });
							  ths.form.coachPhone = ths.form.coachPhone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
							if (ths.form.coachImg.includes(',')) {
							  let splitImages = ths.form.coachImg.split(',');
							  ths.form.coachImg=splitImages
							} else {
								let arr=[]
								arr.push(ths.form.coachImg)
								ths.form.coachImg=arr
								
							}
						} else {
							uni.showToast({
								title: '操作失败',
								icon: 'error',
								duration: 2000
							});
						}
				
					},
					fail: function(error) {
						// 处理请求失败
						console.error('上传课程失败，请检查网络');
					}
				})
			},
			shengqing(){
				uni.navigateTo({
					url:"/pages/coach/Pesonal/shengqing"
				})
			}
		}
	}
</script>

<style>
.body-d1-d{
	width: 100%;
	height: 80rpx;
	margin-top:20rpx;
	border-bottom:1px solid #e7e7e7;
}
.body-d1-d-d1{
	width: 30%;
	height: 80rpx;
	display: flex;
	align-items: center;
	float: left;
}
.body-d1-d-d2{
	width: 65%;
	height: 80rpx;
	display: flex;
	align-items: center;
	justify-content:flex-end;
	float: left;
}
.content {
	display: flex;
	height: 100vh;
	width:100%;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: rgba(237, 245, 247, 1);
}
.top {
	height: 40vh;
	width: 100%;
	/* background-image: linear-gradient(to bottom, #94A9FD, #9ECFFF, #b9e1ff,#fff); */
}
.top-d1 {
	width: 90%;
	height: 13vh;
	margin: 0 auto;
	margin-top:8vh;
	
}
.top-d2 {
	width: 90%;
	height: 10vh;
	box-sizing: border-box;
	/* box-shadow: 0 2px 10px #dfdfdf; */
	background-color: #fff;
	margin: 0 auto;
	margin-top:6vh;
	border-radius: 15rpx;
	
}
.body {
	margin-top: 13px;
	width:100%;
	height: 100%;
	overflow: auto;
	box-sizing: border-box;
}
.body-d1{
	width: 90%;
	min-height: 40vh;
	height: auto;
	margin: 0 auto;
	
	box-sizing: border-box;
	padding: 5rpx 20rpx 5rpx 20rpx;
	box-shadow: 0 2px 10px #dfdfdf;
	background-color: #fff;
	border-radius: 40rpx;
	overflow: visible;
}
</style>
